<template>
	<view class="home-lisr">
		<view class="ww100 text-center h60 flex justify-center">
			<view class="text-center w300 flex justify-center lh60 r30" style="border: 2rpx solid #000000;overflow: hidden;">
				<view class="borderBottom pl20 pr20" :class="currentIndex == index ? 'bgcText' : ''"
					v-for="(item, index) in listTab" :key="index" @click="change(index)">
				
					{{item.name}}
				</view>
				<!-- <view class="tab-list">
					<u-tabs :list="listTab" active-color="#020002" :bar-style="style" gutter="40" item-width="300"
						:is-scroll="false" :current="currentIndex" @change="change">
					</u-tabs>
				</view> -->
			</view>
		</view>


		<!-- 魅力榜 -->
		<view v-if="bgc == 1" class="ww100 flex mt51 align-center" v-for="(item,index) in 5" :key="index" style="padding: 0 30rpx;">
			<view class="flex align-center">
				{{index + 1}}
				<image class="ml39 mr29 w90 h90 r45" src="../../../../static/login/xz1.png" mode=""></image>
			</view>
			<view class="ww100 pb32 border-bod" >

				<view class=" f30 mb24 flex justify-between align-center ww100">
					<view class="mr330">
						酱酱
						<i class="ml25 cuIcon-male f20" style="color: #40C6A8; font-weight: 700;"></i>
						<text class="ml8 f20" style="color: #666666; ">26</text>
					</view>

					<view class="" style="color: #666666;
							font-size: 22rpx;
							font-family: PingFang SC;">
						<i class="cuIcon-favor mr9"></i>
						599
					</view>
				</view>
				<view class="flex align-center">
					<view class="btn">
						学徒精灵
					</view>
					<view class="ml14">
						<image src="../../../../static/vip/gaoji.png" class="w110 h40" mode=""></image>
					</view>
				</view>
			</view>
		</view>


		<!-- 土豪榜 -->
		<view v-if="bgc == 2" class="ww100 flex mt51 align-center" v-for="(item,index) in 5" :key="index" style="padding: 0 30rpx;">
			<view class="flex align-center">
				1
				<image class="ml39 mr29 w90 h90 r45" src="../../../../static/login/xz1.png" mode=""></image>
			</view>
			<view class="ww100 pb32 border-bod" >
		
				<view class=" f30 mb24 flex justify-between align-center ww100">
					<view class="mr330">
						酱酱
						<i class="ml25 cuIcon-female f20" style="color: #FF2B8A; font-weight: 700;"></i>
						<text class="ml8 f20" style="color: #666666; ">26</text>
					</view>
		
					<view class="" style="color: #666666;
							font-size: 22rpx;
							font-family: PingFang SC;">
						<i class="cuIcon-favor mr9"></i>
						599
					</view>
				</view>
				<view class="flex align-center">
					<view class="btn1">
						学徒精灵
					</view>
					<view class="ml14">
						<image src="../../../../static/vip/gaoji.png" class="w110 h40" mode=""></image>
					</view>
				</view>
			</view>
		</view>



		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			xbList: {
				type: Array,
				required: true,
			}
		},
		data() {
			return {
				bgc: 1,
				listTab: [{
					name: '魅力榜'
				}, {
					name: '土豪榜'
				}],
				currentIndex: 0,
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			cutBgc(index) {
				this.bgc = index
				
				
			},
			
			change(index) {
				var tab = ''
				this.currentIndex = index;
				if (index == 0 ) {
					tab = 1
				} else {
					tab = 2
				}
				this.$emit('tabIndex',tab)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.home-lisr {
		
		.bgc-left {
			width: 236rpx;
			height: 60rpx;
		}

		.btnr {
			padding-right: 30rpx;
			margin-left: -30rpx;
		}

		.blak {
			color: #333333 !important;
			background-color: #FFFFFF !important;
		}

		.btn {
			padding: 5rpx 8rpx;
			border: 2rpx solid #40C6A8;
			border-radius: 30rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #40C6A8;
			text-align: center;
		}
		
		.btn1 {
			padding: 5rpx 8rpx;
			border: 2rpx solid #FF2B8A;
			border-radius: 30rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF2B8A;
			text-align: center;
		}
		
		.border-bod {
			width: 100%;
			border-bottom: 1rpx solid #F0F0F0;
		}
		
		.borderBottom {
			width: 50%;
			color: #000000;
			background-color: #fff;
		}
		
		.bgcText {
			color: #FFFFFF;
			background-color: #000000;
		}	
		

	}
</style>
